<template>
  <j-modal :confirmLoading="confirmLoading" :title="title" :visible="visible" :width="1200" cancelText="关闭"
           switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button v-if="title=='审批'" :loading="confirmLoading" type="primary" @click="handleOk(4)">
        驳回
      </a-button>
      <a-button v-if="title=='审批'" :loading="confirmLoading" type="primary" @click="handleOk(3)">
        通过
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-col :md="12">
        <a-divider orientation="left" style="margin-top: 0px;">旧门店</a-divider>
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店名称">
            <a-input v-decorator="['customerName']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店编码">
            <a-input v-decorator="['customerCode']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店等级">
            <a-input v-decorator="['terminalLevelStr']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店地址">
            <a-input v-decorator="['address']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人">
            <a-input v-decorator="['contacts']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人电话">
            <a-input v-decorator="['telephone']" :disabled="disableSubmit"/>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :md="12">
        <a-divider orientation="left" style="margin-top: 0px;">新门店</a-divider>
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店名称">
            <a-input v-decorator="['transferredTerminalName']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店编码">
            <a-input v-decorator="['transferredTerminalCode']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店等级">
            <a-input v-decorator="['transferredTerminalLevelStr']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店地址">
            <a-input v-decorator="['transferredAddress']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人">
            <a-input v-decorator="['transferredContacts']" :disabled="disableSubmit"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人电话">
            <a-input v-decorator="['transferredTelephone']" :disabled="disableSubmit"/>
          </a-form-item>
        </a-form>
      </a-col>

      <a-divider orientation="left" style="margin-top: 0px;">资产清单</a-divider>
      <a-col :md="24">
          <div style="padding: 10px 20px;">
            <a-table ref="table" :columns="columns"
                     :dataSource="dataSource"
                     :rowSelection="{selectedRowKeys:selectedRowKeys, onChange: onSelectChange1}"
                     :scroll="{x:400,y:240 }" bordered
                     rowKey="id" size="middle"
                     @change="handleTableChange">

            </a-table>
          </div>
      </a-col>
      <a-divider orientation="left" style="margin-top: 0px;">资产照片</a-divider>
      <a-col :md="24" style="padding-left: 48px">
        <viewer :images="model.assetsUrlVos">
          <a-avatar v-for="(item,uidx) in model.assetsUrlVos" :key="uidx" :src="item.url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-col>
      <a-divider orientation="left" style="margin-top: 0px;">审核流程</a-divider>
      <div style="width: 80%;margin: 24px auto">
        <!--      status="error"-->
        <a-steps :current="stepsIndex" size="small">
          <a-step v-for="(item,index) in approval" :key="index"
                  :title="item.currentNodeDesc"
                  :status="item.status"
                  :subTitle="item.approvalTime"
          >
            <div slot="description">
              {{item.approvalRealName }}
            </div>
            <div slot="description" v-if="item.remarks">
              意见:{{item.remarks }}
            </div>
          </a-step>
        </a-steps>
      </div>
      <a-divider orientation="left" style="font-weight: 600;margin-top: 0px;">审批意见</a-divider>
      <a-form-item
      >
        <a-textarea v-model="approvalRemarks" :disabled="title!='审批'" allow-clear placeholder="请输入审批意见"
                    style="width:90%;margin-left:5%;min-height: 80px"/>
      </a-form-item>
    </a-spin>
  </j-modal>
</template>

<script>
import {
  httpAction,
  postAction
} from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import pick from 'lodash.pick'
import chooseModal from '@/components/cn-components/ChooseModal'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import myShuttleModal from '@/components/cn-components/CnShuttleModal'

export default {
  name: 'SfaSignConfigModal',
  components: {
    JTreeSelect,
    chooseModal,
    proChose,
    myShuttleModal
  },
  data() {
    return {
      name: '',
      title: '操作',
      objs: [],
      approval:[],
      value: 1,
      disPlayImgList: [], //图片
      disPlayImgList2: [],//变更图片
      positionCode: '', //职位编码
      dataSource: [],
      dataSource2: [],
      approvalRemarks:'',
      lineVos: [],
      remarks: '',
      remarks2: '',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        }
      },
      // 商品
      columns: [
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'goodsCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'goodsName'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'basicUnitStr'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'number'
        },
      ],
      // columns2: [
      //   {
      //     title: '物料编码',
      //     align: 'center',
      //     dataIndex: 'code'
      //   },
      //   {
      //     title: '物料名称',
      //     align: 'center',
      //     dataIndex: 'name'
      //   },
      //   {
      //     title: '操作',
      //     dataIndex: 'action',
      //     fixed: 'right',
      //     align: 'center',
      //     width: 150,
      //     scopedSlots: {
      //       customRender: 'action'
      //     }
      //   }
      // ],
      orgSearchConfig: [
        {
          type: 'input',
          placeholder: '物料编码',
          name: 'materialCode'
        },
        {
          type: 'input',
          placeholder: '物料名称',
          name: 'materialName'
        }
      ],
      orgColumns: [

        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        }
      ],
      orgColumns2: [
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          // fixed: 'right',
          align: 'center',
          scopedSlots: {
            customRender: 'delete'
          }
        }
      ],
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      selectedRowKeys2: [],
      /* table选中records*/
      selectionRows2: [],
      // positionsColumns: [
      //   {
      //     title: '门店编码',
      //     align: 'center',
      //     dataIndex: 'terminalCode'
      //   },
      //   {
      //     title: '门店名称',
      //     align: 'center',
      //     dataIndex: 'terminalName'
      //   },
      //   {
      //     title: '操作',
      //     dataIndex: 'action',
      //     fixed: 'right',
      //     align: 'center',
      //     width: 150,
      //     scopedSlots: {
      //       customRender: 'action'
      //     }
      //   }
      // ],
      rule: [{
        count: 0,
        actCode: '',
        orderNum: '',
        discount: '',
        gifts: []
      }],
      chara: [],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        visitDates: {
          rules: [{
            required: true,
            message: ''
          }]
        },
        visitUserRealName: {
          rules: [{
            required: true,
            message: ''
          }]
        },
        classifyName: {
          rules: [{
            required: true,
            message: ''
          }]
        },
        classifytotName: {
          rules: [{
            required: true,
            message: ''
          }]
        },
      },
      url: {
        // add: window._CONFIG['domianSfaURL'] + '/visit/sfaVisitLineController/saveOrUpdate',
        // savePosCust: window._CONFIG['domainURL'] + '/cnTerminalExtendController/saveTerminalExtend',
        // saveUserRelation: window._CONFIG['domianURL'] + '/customerExtendController/saveExtendPos',
        addOrUpdateUrl: window._CONFIG['domianSfaURL'] + '/sfaVisitAssetsController/toExamine',
        // addDetail:window._CONFIG['domianSfaURL'] + '/sfaOrderController/UpdateBeforeDeliverGoods',
        list: '/material/findPageList'
      }
    }
  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    },
    modalProps1() {
      return {
        name: this.name
      }
    }
  },
  methods: {
    //图片上传
    pdLogoChange(e) {
      this.disPlayImgList2 = []
      e.forEach(item => {
        this.disPlayImgList2.push({
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    //客户
    onSelectChange1(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    //门店新增弹窗确认
    chooseOk(e) {
      let key = this.dataSource2.map(item => {
        return item.code
      })
      console.log(e)
      let that = this
      e.forEach(item => {
        if (key.indexOf(item.materialCode) == -1) {
          // item.code = item.terminalCode
          // item.name = item.terminalName
          this.dataSource2.push(item)
        }
      })
    },
    chooseOk2(e) {
      this.dataSource = []
      console.log(e)
      let that = this
      e.forEach(item => {
        item.goodsCode = item.materialCode
        item.goodsName = item.materialName
        this.dataSource.push(item)
      })
    },
    okbropro2(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      this.objs = objs
      this.form.setFieldsValue({
        visitUserName: objs.userName,
        visitUserRealName: objs.realName,
        visitPosName: objs.positionName,
        visitPosCode: objs.positionCode,
        departName: objs.departName,
        departCode: objs.departCode,
      })
      this.positionCode = this.objs.positionCode
    },
    showModal(groupCode) {
      this.visible = true
      this.reqCode = groupCode
      this.queryParam.groupCode = groupCode
    },
    //商品
    handleDelete2(e) {
      let key = this.dataSource2.map(item => {
        return item.id
      })
      this.dataSource2.splice(key.indexOf(e.id), 1)
    },
    handleDelete() {
      let key = this.dataSource.map(item => {
        return item.id
      })
      this.dataSource.splice(key.indexOf(e.id), 1)
    },
    add() {
      this.edit({})
    },
    edit(record, id) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.remarks = this.model.remarks
      this.approvalRemarks=this.model.approvalRemarks
      this.dataSource2 = this.model.oldAssetsDetailsVos
      this.dataSource = this.model.assetsDetailsVos
      this.visible = true
      this.getApproval()
      this.$nextTick(() => {
        this.form.setFieldsValue(this.model)
      })
    },
    async getApproval() {
      if (this.model.id) {
        let res = await postAction(window._CONFIG['domianSfaURL'] +'/approval/sfaApprovalLog/findNodeLogList', {
          businessFlag: '资产流程',
          businessId: this.model.id
        })
        if (res.success) {
          this.approval = res.result.map((item,index) => {
            if (item.approvalStatus == 4) {
              item.status = 'error'
            } else if (item.approvalTime) {
              item.status = 'finish'
            }else if ( !item.approvalTime&& res.result[index-1].approvalTime) {
              item.status = 'process'
            }else {
              item.status = 'wait'
            }
            return item
          })
        } else {
          this.$message.error(res.message)
        }
      }
    },
    handleConfigTer() {
      this.dataSource2.forEach(item => {
        this.$refs.orgShuttleModal.dataSource2.push({ terminalName: item.name, terminalCode: item.code })
      })
      this.$refs.orgShuttleModal.visible = true
      this.$refs.orgShuttleModal.loadData()
    },
    handleConfigTer2() {
      this.dataSource.forEach(item => {
        this.$refs.orgShuttleModal.dataSource2.push({ materialName: item.goodsName, materialCode: item.goodsCode })
        this.$refs.orgShuttleModal.selectionRows.push({ materialName: item.goodsName, materialCode: item.goodsCode })
      })
      this.$refs.orgShuttleModal.visible = true
      this.$refs.orgShuttleModal.loadData()
    },
    close() {
      this.$emit('close')
      this.disPlayImgList2 = []

      this.form = this.$form.createForm(this),
        this.visible = false
      this.approval=[]
      this.remarks = '',
        this.dataSource = []
      this.dataSource2 = []
    },
    handleOk(status) {
      let formData = {
        approvalStatus: status,
        remarks:this.remarks2,
        id: this.model.id,
        approvalRemarks:this.approvalRemarks,
      }
      this.confirmLoading = true
      let that = this
      httpAction(this.url.addOrUpdateUrl, formData, 'post').then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
          that.close()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>
